<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3033678_tl6ywddpnjb.css">
    <script src="../js/vue.js"></script>
    <style>
        a{
            color: inherit;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="count++">count++</button>
        <br>
       
        <!-- 传入文本 -->
        <nav-link url="https://www.baidu.com" :blank="true">
            百度
        </nav-link>
        <br>
        
        <!-- 传入html结构 => 虽然实现但是传html结构时比较麻烦 -->
        <nav-link url="https://www.baidu.com" :blank="true">
            <i class="iconfont icon-saoyisao"></i>
            扫一扫
        </nav-link>
        <br>


        <nav-link url="https://www.baidu.com" :blank="true">
            计数: <span @click="addCount">{{count}}</span>
        </nav-link>
    </div>
    
</body>
<script>
    // 插槽
    // Vue 实现了一套内容分发的 API, 将 <slot> 元素作为承载分发内容的出口。

    // slot => 官方内置组件,在组件封装过程中使用, 用于接收父组件给子组件标签对中传入的内容(插槽内容)

    // 本质上: slot内置组件,属于占位符,在子组件解析过程中,slot会被替换为父组件传入的插槽内容

    let NavLink = {
        props:['url',"blank"],
        data(){
            return {}
        },
        template:`<span :href="url" :target="blank?'_blank':'_self'">
                <slot></slot>
            </span>`,
        mounted() {
            console.log("当前实例",this);
        },
    }

    var vm = new Vue({
        el:"#app",
        data:{
           count:1,
        },
        methods:{
            addCount(){
                this.count++;
            }
        },
        components:{
            NavLink,
        }
    })

</script>
</html>